<template>
    <Page class="basic company">
        <template #header>
            <el-input v-model="queryForm.productName" placeholder="请输入商品名称" />
            <!-- <EdSelect v-model="queryForm.categoryId" :selectParams="selectGoodsType"></EdSelect> -->
            <EdCascader v-model="queryForm.categoryId" :cascaderParams="selectGoodsType" :filterable="true"></EdCascader>

            <EdSelect v-model="queryForm.productSource" :selectParams="selectSource"></EdSelect>
            <EdSelect v-model="queryForm.releaseStatus" :selectParams="selectPublishStatus_2"></EdSelect>
            <!-- <EdDateTimeRange ref="timeRange" @emit-echo-time-range="emitEchoTimeDate($event, 'pickerTime')"></EdDateTimeRange> -->
            <EdDateTimePickerRange v-model="queryForm.pickerTime"  @emit-echo-time-range="emitEchoTimeDate($event, 'pickerTime')" :pickerParams="pickerRangeParams"></EdDateTimePickerRange>

            <el-button class="ed-button ed_black-bottom" @click="search()"><svg-icon class="svg-middle" icon-class="search-svg"/>查 询</el-button>
            <el-button class="ed-button ed_white_bottom" @click="reset()"><svg-icon icon-class="reset-svg"/>重 置</el-button>
        </template>
        <PageCard title="资源库列表">
            <template #actions>
                <el-button class="ed-button ed_black-bottom ed-button36" @click="batchHandle()" v-has="'shopping:resourcePool:batchHandle'"><svg-icon icon-class="batch-handle-svg"/>批量处理</el-button>
                <el-button class="ed-button ed_black-bottom ed-button36" @click="add()" v-has="'shopping:resourcePool:add'"><svg-icon icon-class="add-svg"/>添加商品</el-button>
            </template>
            <ApiTable :api="tableApi" ref="table" :params="queryForm">
                <el-table-column type="index" width="80" label="序号"></el-table-column>
                <!-- <el-table-column width="80" prop="id" label="序号"></el-table-column> -->
                <el-table-column :show-overflow-tooltip="true" prop="productNo" label="商品编号" :formatter="formatter"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="productName" label="商品名称" :formatter="formatter"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="categoryName" label="商品类别" :formatter="formatter">
                    <!-- <template slot-scope="scope">
                        <span>{{returnName(scope.row['categoryId'], selectGoodsType.options, 'code', 'categoryName') || scope.row['categoryId']}}</span>
                    </template> -->
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="productSource" label="来源">
                    <template slot-scope="scope">
                        <span>{{returnName(scope.row['productSource'], selectSource.options) || scope.row['productSource'] || '-'}}</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="productPrice" label="商品限价" :formatter="formatter"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="productStock" label="总库存">
                    <template slot-scope="scope">
                        <span>{{ scope.row['productStock'] ? scope.row['productStock']+'件' : ( scope.row['productStock']==0?scope.row['productStock']:  '无限制') }}</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="remainingStock" label="剩余库存">
                    <template slot-scope="scope">
                        <span>{{ scope.row['remainingStock'] ? scope.row['remainingStock']+'件' : ( scope.row['remainingStock']==0?scope.row['remainingStock']:  '无限制') }}</span>
                    </template>
                </el-table-column>
                <el-table-column width="250" :show-overflow-tooltip="true" prop="creatTime" label="创建时间" :formatter="formatter"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="releaseStatus" label="发布状态">
                    <template slot-scope="scope">
                        {{scope.row.releaseStatus == '1' ? '发布' : '下架'}}
                        <el-switch
                            :value="scope.row.releaseStatus == '1' ? true : false"
                            @change="switchChange(scope.row, scope.row.releaseStatus == '1' ? '0' : '1')"
                            active-color="#EED096"
                            inactive-color="#909399">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column width="250" :show-overflow-tooltip="true" prop="" label="操作">
                     <template slot-scope="scope">
                        <el-button class="ed-table-bottom ed_black_border" :disabled="scope.row.releaseStatus==1" v-has="'shopping:resourcePool:update'" @click="updateRow(scope.row)">编辑</el-button>
                        <el-button class="ed-table-bottom ed_delete_border" :disabled="scope.row.releaseStatus==1 || scope.row.releaseStatus==2" v-has="'shopping:resourcePool:del'" @click="del(scope.row)">删除</el-button>
                        <el-button class="ed-table-bottom ed_see_border" v-has="'shopping:resourcePool:see'" @click="see(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </ApiTable>
        </PageCard>
        <EdConfirmDelete ref="confirmDeleteRef" @confirmDeleteTrue="confirmDeleteTrue"></EdConfirmDelete>
        <EdDialog :width="'474px'" :title="'批量处理'" ref="batchHandleDialog" class="batchHandleDialog" v-if="batchHandleVisible"  @close-dialog="batchHandleClose" @save-dialog="batchHandleSave">
           <div class="content">
                <div class="header">
                    <i class="el-icon-warning" style="color:#EED096;font-size: 18px;"></i>
                    <span>即将批量处理{{bacth_total}}条数据</span>
                </div>
                <div class="main">
                    发布状态&nbsp;
                    <el-radio-group v-model="batch_radio">
                        <el-radio v-for="item in selectPublishStatus.options" :key="item.value" :label="item.value">{{item.label}}</el-radio>
                    </el-radio-group>
                </div>
           </div>
        </EdDialog>
    </Page>
</template>

<script>
import Page from '../../components/Page.vue'
import PageCard from 'src/views/components/PageCard.vue'
import ApiTable from 'src/components/ApiTable.vue'
import EdSelect from 'src/components/EdSelect.vue'
import EdCascader from 'src/components/EdCascader.vue'
import EdDateTimeRange from 'src/components/EdDateTimeRange.vue'
import EdDateTimePickerRange from 'src/components/EdDateTimePickerRange.vue'
import EdDialog from 'src/components/EdDialog.vue';
import { defineComponent } from 'vue'
import { resourceList, resourceDel, resourcePub, resourceUnpub, resourceBacth, getResourceType } from "./api";
import EdConfirmDelete from "src/components/EdConfirmDelete.vue";
import { returnName } from "src/utils/common.js";
import { getDictByCode } from "src/api/dictionaries";
export default defineComponent({
    name: 'member',
    components: { Page, PageCard, ApiTable, EdSelect, EdConfirmDelete, EdDateTimeRange, EdDialog, EdCascader, EdDateTimePickerRange },
    data() {
        return {
            queryForm: {
                productName: '',
                categoryId: '',
                productSource: '',
                releaseStatus: '',
                pickerTime: '',
                startTime: '',
                endTime: '',
            },
            pickerRangeParams:{
                valueFormat:"yyyy-MM-dd HH:mm"
            },
            selectGoodsType:{
                placeholder:"请选择商品类别",
                options: [],
                props: { value: 'code', label: 'categoryName', checkStrictly: true, emitPath: false }
            },
            selectSource:{
                placeholder:"请选择来源",
                options: [
                    // { value: '1', label: '轻喜到家' },
                    // { value: '2', label: '天仙配' },
                    // { value: '3', label: '卡券平台' },
                ],
            },
            selectPublishStatus:{
                options: [{
                    value: '1',
                    label: '发布'
                }, {
                    value: '2',
                    label: '下线'
                }],
            },
            selectPublishStatus_2:{
                options: [
                // {
                //     value: '0',
                //     label: '待处理'
                // }, 
                {
                    value: '1',
                    label: '已发布'
                }, {
                    value: '2',
                    label: '未发布'
                }],
                placeholder:"请选择发布状态"
            },
            // 批量处理
            batchHandleVisible: false,
            batch_radio: '1',
            bacth_total: ''
        }
    },
    activated(){
        // 来源
        getDictByCode('product_source').then(res=>{
            this.selectSource.options = res.data.items;
        })
        // 商品类别
        getResourceType({pageSize: 999999}).then(res=>{
            this.selectGoodsType.options = res.data;
        })
        this.$nextTick(() => {
            this.$refs.table.load(1);
        })
    },
    methods: {
        tableApi: resourceList,
        search(){
            // delete this.queryForm['pickerTime'];
            this.$refs.table.load(1)
        },
        reset(){
            this.queryForm = {
                productName: '',
                categoryId: '',
                productSource: '',
                releaseStatus: '',
                pickerTime: '',
                startTime: '',
                endTime: '',
            }
            // this.$refs.timeRange.reset();
            this.$nextTick(() => {
                this.$refs.table.load(1, 10);
            })
        },
        add(){
            this.$router.push({
                path: '/shopping/resourcePool-add'
            })
        },
        // 批量处理
        batchHandle(){
            // console.log('ref---', this.$refs.table)
            this.bacth_total = this.$refs.table.page.total;
            this.batchHandleVisible = true;
        },
        batchHandleClose(){
            this.batch_radio = '1';
            this.batchHandleVisible = false;
        },
        batchHandleSave(){
            let params = {
                ...this.queryForm,
                releaseType: this.batch_radio,
            }
            // console.log('params--->', params)
             resourceBacth(params).then(response => {
                if(response.success == true) {
                    this.$message.success({
                        message: '处理成功！',
                        duration: 2000,
                        center:true
                    });
                    this.batch_radio = '1';
                    this.batchHandleVisible = false;
                    this.$refs.table.load()
                }
            }).catch(()=>{
                this.$refs.batchHandleDialog.hideLoading()
            })
        },
        // 编辑
        updateRow(row){
            this.$router.push({
                path: '/shopping/resourcePool-update',
                query: { id: row.id },
            })
        },
        del(row){
            this.confirmRow = row;
            this.$refs.confirmDeleteRef.open("删除确认","确认删除此项数据？","warning")
        },
        // 删除回调
        confirmDeleteTrue(){
            resourceDel({id: this.confirmRow.id}).then(response => {
                if(response.success == true) {
                    this.$message.success({
                        message: '删除成功！',
                        duration: 2000,
                        center:true
                    });
                    this.$refs.table.load()
                }
            })
        },
        // 发布状态
        switchChange(row, value){
            let params = {
                id: row.id,
                // publishStatus: value,
            }
            let fucApi = value == 1 ? resourcePub : resourceUnpub;
            fucApi(params).then(res => {
                if(res.success == true){
                    this.$message.success({
                        message: '操作成功',
                        duration: 2000,
                        center:true
                    })
                    this.$refs.table.load()
                }
            })
        },
        returnName(val, options, value, label){
            return returnName(val, options, value, label)
        },
        emitEchoTimeDate(data){
            // $event 子组件$emit传的参数 
            this.queryForm['startTime'] = data.startTime;
            this.queryForm['endTime'] = data.endTime;
        },
        // 查看
        see(row){
            this.$router.push({
                path: '/shopping/resourcePool-detail',
                query: { id: row.id },
            })
        },
        formatter(row, column, cellValue, index){
            return cellValue || '-'
        }
    }
})
</script>

<style scoped lang="scss">
    :deep .batchHandleDialog{
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 400;
        font-size: 18px;
        .el-dialog__body{
            padding-left: 75px;
        }
        .header{
            color: #1E1E1E;
            margin-bottom: 30px;
        }
        .main{
            color: #606266;
        }
        .el-radio-group .el-radio.is-checked{
            .el-radio__input{
                .el-radio__inner{
                    border-color: #EED096;
                    background: #EED096;
                }
            }
            .el-radio__label{
                color: #EED096;
            }
        }

        .el-radio-group .el-radio{
            .el-radio__input{
                .el-radio__inner:hover{
                    border-color: #EED096;
                }
            }
        }
    }
</style>